<template>
  <div class="set set2">
    <div class="set_ct">
      <Form ref="formValidate"
            v-if="isTrue"
            :model="formData"
            :rules="ruleValidate"
            :label-width="100"
            class="set_ct_form">
        <FormItem label="跑马灯开关:"
                  prop="marqueeLedType">
          <RadioGroup v-model="formData.marqueeLedType">
            <Radio label="1">开</Radio>
            <Radio label="0"
                   style="margin-left:50px;">关</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="跑马灯颜色:"
                  prop="marqueeLedColour"
                  v-if="formData.marqueeLedType==='1'">
          <Select v-model="formData.marqueeLedColour"
                  style="width:260px"
                  @on-change="selectColour">
            <!-- <Option value="0">请选择</Option> -->
            <Option value="1">红色</Option>
            <Option value="2">绿色</Option>
            <Option value="3">蓝色</Option>
            <Option value="4">七彩色</Option>
          </Select>
        </FormItem>
        <FormItem label="时间间隔(ms):"
                  prop="marqueeLedFrequency"
                  v-if="formData.marqueeLedType==='1'&&formData.marqueeLedColour==='4'">
          <Select v-model="formData.marqueeLedFrequency"
                  style="width:260px">
            <!-- <Option value="0">请选择</Option> -->
            <Option value="10">10</Option>
            <Option value="50">50</Option>
            <Option value="100">100</Option>
            <Option value="200">200</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary"
                  class="btn"
                  @click="handleSubmit">确认</Button>
          <Button class="btn"
                  style="margin-left:20px;"
                  @click="cancel">取消</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import { getDicQuery, setDicSave } from '@/api/setting'
// import { routeEqual } from '@/libs/util'
import './index.less'
export default {
  name: 'store_setting_page_7',
  data () {
    return {
      title: '机台跑马灯配置',
      selectmarqueeLedType: '',
      isTrue: false,
      isAffirm: true,
      formData: {
        marqueeLedType: '1',
        marqueeLedColour: '4',
        marqueeLedFrequency: '100'
      },
      ruleValidate: {
        marqueeLedType: [{ required: true, message: '请选择跑马灯开关', trigger: 'change' }],
        marqueeLedColour: [
          {
            required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (value === '0') {
                callback(new Error('请选择跑马灯颜色'))
              } else if (!value) {
                callback(new Error('请选择跑马灯颜色'))
              } else {
                callback()
              }
            }
          }
        ],
        marqueeLedFrequency: [
          {
            required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (value === '0') {
                callback(new Error('请选择时间间隔'))
              } else if (!value) {
                callback(new Error('请选择时间间隔'))
              } else {
                callback()
              }
            }
          }
        ]

      }
    }
  },
  // watch: {
  //   'formData.marqueeLedType' (newVal) {
  //     if (newVal === '0') {
  //       this.formData.marqueeLedColour = '0'
  //       this.formData.marqueeLedFrequency = '0'
  //     }
  //   }
  // },
  methods: {
    selectColour (val) {
    },
    closeModal () {
      this.$store.commit('closeTag', this.$route)
      if (this.$store.state.app.tagNavList[this.$store.state.app.tagNavList.length - 1].name !== 'global_setting') {
        this.$nextTick(() => {
          this.$router.push({
            name: 'global_setting'
          })
        })
      }
    },
    handleSubmit () {
      this.$refs.formValidate.validate((val) => {
        if (val) {
          if (this.isAffirm) {
            if (!this.isAffirm) {
              return
            }
            this.isAffirm = false
            // if (this.formData.marqueeLedType === '0') {
            //   this.formData.marqueeLedColour = ''
            //   this.formData.marqueeLedFrequency = ''
            // }
            setDicSave({
              // 'shopId': this.$route.query.id,
              'marqueeLedType': this.formData.marqueeLedType,
              'marqueeLedColour': this.formData.marqueeLedColour,
              'marqueeLedFrequency': this.formData.marqueeLedFrequency,
              'merchantId': this.$store.state.user.merchantId,
              'msType': '0'
            }).then(res => {
              setTimeout(() => {
                this.isAffirm = true
              }, 800)
              if (res.data.status === 200) {
                this.$Message.success('设置成功')
                this.closeModal()
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          }
        }
      })
    },
    cancel () {
      this.closeModal()
    },
    submitForm () {
      getDicQuery({
        'dictKeys': 'marqueeLedType,marqueeLedColour,marqueeLedFrequency',
        'merchantId': this.$store.state.user.merchantId,
        // 'shopId': this.$route.query.id,
        'msType': '0'
      }).then((res) => {
        if (res.data.status === 200) {
          this.isTrue = true
          this.formData.marqueeLedType = res.data.data[0].marqueeLedType + ''
          this.formData.marqueeLedColour = res.data.data[1].marqueeLedColour + ''
          this.formData.marqueeLedFrequency = res.data.data[2].marqueeLedFrequency + ''
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    }
  },
  mounted () {
    this.submitForm()
    if (!this.hasPermission('moms:globalsetting:horselamp')) {
      this.$router.replace({ name: 'error_401' })
    }
  }
}
</script>
<style lang="less" scoped>
.set2 {
  .set_ct {
    .set_ct_form {
      width: 400px;
      .set_ct_form_icon {
        display: inline-block;
        width: 24px;
        text-align: center;
        margin-left: 16px;
        .ivu-icon {
          font-size: 17px;
        }
      }
      .form_tone {
        .ivu-form-item-content {
          > div {
            margin-bottom: 24px;
          }
          > div:last-of-type {
            margin-bottom: 0px;
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
.form_tone {
  .ivu-form-item-label::before {
    display: none;
  }
}
</style>
